<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>添加成员</title>
  {$h->import('static/layui/layui.css')}
  {$h->import('static/css/common.css')}

  <style>
    .layui-transfer-box {
      overflow-y: auto;
    }
    /*滚动条美化*/
    #serviceTransfer ::-webkit-scrollbar {
      width: 4px;
    }
    /*滚动条中间滑动部分*/
    #serviceTransfer ::-webkit-scrollbar-thumb {
      background-color: #ccc;
      border-radius: 3px;
    }
    .publicSearch_container{
      width: 198px;
      margin-left: 93px;
      display: flex;
      align-items: center;
      border: 1px solid #d9d9d9;
      height: 34px;
      padding: 4px 11px;
      color: rgba(0,0,0,.65);
      font-size: 14px;
      /* border-radius: 4px; */
      box-sizing: border-box;
      background: #fff;
      margin-bottom: 10px;
      justify-content: space-between; 
    }
    .publicSearch_container input{
      outline: none;
      appearance: none;
      border: none;
      font-size: 14px;
      color: rgba(0,0,0,.65);
      width: 150px;
    }
    .publicSearch_container i{

    }
  </style>
</head>
<body>
  <!-- 成员选择面板 -->
  <div style="padding: 20px;" id="serviceModel">
    <!-- <p style="font-size: 13px;margin-bottom: 20px">没有想要添加的成员？
      <span class="add-service-doc-btn" style="color: #1E9FFF;cursor: pointer;">添加成员教程</span>
    </p> -->
    

      <!--<form  method="get" action="" id="Form1">-->
        <div class="publicSearch_container">
          <input type="text" id="etname" name="etname" value="{$etname}" placeholder="请输入名称进行搜索" autocomplete="off">
          <i class="layui-icon layui-icon-search" onclick="search_et()"></i>
        </div>
      <!--</form>-->
    
    <div class="flex justify-center">
      <div id="serviceTransfer" class="demo-transfer"></div>
    </div>
    <!-- 分页 --> 
    <div style="display: inline-block;margin-top: 11px;min-width: 367px;text-align: center;">
      <div id="serviceTransferPagination" style="display: inline-block;"></div>
    </div>
    <!-- 数据，或者在js中通过ajax动态请求后调用reloadTransfer也可以 -->
    <div id="serviceTransferData" style="display:none;width:0;height:0;overflow:hidden;">{$etList}</div>
    <div style="text-align: right;padding-right: 30px;">
      <button onclick="parent.layer.closeAll()" type="button" class="layui-btn layui-btn-primary">取消</button>
      <button class="layui-btn layui-btn-normal apanel-confirm" lay-submit lay-filter="levelEditForm">保存</button>
    </div>
  </div>
<script src="/unpkg/unpkg.vue.js"></script>

  {$h->import('static/js/layui.all.js')}
  {$h->import('static/js/ajax.js')}
  {$h->import('static/js/jquery.min.js')}
  <script>
    function search_et(){
      var etName = $('#etname').val();
      myAjaxPost(false, true, '?etname='+etName, [], function (resp) {
        if (resp.status == 'success') {
          var pdata = resp.data;
          for (var i = 0; i < pdata.length;i++) {
            pdata[i].value = pdata[i].id;
            pdata[i].title = pdata[i].name;
          }
          // 实例 穿梭框分页
          var thePageSize = 100;
          layui.laypage.render({
            elem: 'serviceTransferPagination' // 注意，这里的 test1 是 ID，不用加 # 号
            ,count: pdata ? pdata.length : 0 // 数据总数，一般通过服务端得到
            ,curr: 1
            ,limit: thePageSize
            ,groups: 4
            ,theme: '#1E9FFF'
            ,jump: function(obj, first) {
              // first 是否首次，一般用于初始加载的判断
              var page = obj.curr
              var selectedData = layui.transfer.getData('serviceTransfer'); // 当前右侧已选数据，要跟上
              var curPageData = pdata ? pdata.slice((page - 1) * thePageSize, page * thePageSize) : []
              curPageData = selectedData.concat(curPageData) // 初始化已选中的值必须在待选列表中
              //去重复
              var result = [];
              var obj = {};
              for(var i =0; i<curPageData.length; i++){
                 if(!obj[curPageData[i].id]){
                    result.push(curPageData[i]);
                    obj[curPageData[i].id] = true;
                 }
              }
              // layui 穿梭框初始值（value选项）里传的数据value组成的数组....
              for (var i = 0, l = selectedData.length; i < l; i++) {
                selectedData[i] = selectedData[i].value
              }
              layui.transfer.reload('serviceTransfer', {
                data: result
                ,value: selectedData
              });
            }
          });
        }else{
          alert(resp.msg);
        }
      });
    }

    // Vue控制示例
    var app = new Vue({
      el: '#app',
      data: function() {
        return {
        }
      },
      mounted() {
        init();
        layui.use(['form'], function(){
          layui.form.render();
        })
      },
      updated:function() {
        // layui悄咪咪的用了Vue的模板引擎，需要重载 以解决radio、checkbox等失效
        layui.use(['form'], function(){
          layui.form.render();
        })
      },
      methods: {
      }
    })


    function init() {
      var $ = $ || layui.$;
      // 选择成员（穿梭框）数据，thePageSize（每页展示数量）根据需要自行配置
      var pdata = null, thePageSize = 100;

      // 实例 成员选择穿梭框
      layui.transfer.render({
        elem: '#serviceTransfer'
        ,id: 'serviceTransfer' // 定义索引
        ,title: ['全部成员', '已选成员']
        ,height: 360
        ,data: null
        ,showSearch: false
        // ,onchange: function(obj, index){
        //   var arr = ['左边', '右边'];
        //   layer.alert('来自 <strong>'+ arr[index] + '</strong> 的数据：'+ JSON.stringify(obj)); //获得被穿梭时的数据
        // }
      })
      
      // 重载穿梭框数据，比如翻页
      function reloadTransfer(idIndex, data, selectedData) {
        // 可以重载所有基础参数
        layui.transfer.reload(idIndex, {
          data: data
          ,value: selectedData
        });
      }

      window.onload=function()//用window的onload事件，窗体加载完毕的时候
      {
        var type = 'baseInfo1';
        // console.log(type);
        showServiceTransfer(type)
      }
      function showServiceTransfer(type) {
        // type: 哪里触发的，需要区分的话
        if (type === 'baseInfo1') {
          if (!pdata) {
            pdata = document.getElementById('serviceTransferData').innerText
            pdata = JSON.parse(pdata)
            for (var i = 0; i < pdata.length;i++) {
                pdata[i].value = pdata[i].id;
                pdata[i].title = pdata[i].name;
            }
          }
          // 实例 穿梭框分页
          layui.laypage.render({
            elem: 'serviceTransferPagination' // 注意，这里的 test1 是 ID，不用加 # 号
            ,count: '{$counts}' // 数据总数，一般通过服务端得到
            ,curr: 1
            ,limit: thePageSize
            ,groups: 4
            ,theme: '#1E9FFF'
            ,jump: function(obj, first) {
              // first 是否首次，一般用于初始加载的判断
              var page = obj.curr
              var selectedData = layui.transfer.getData('serviceTransfer'); // 当前右侧已选数据，要跟上
            //   var curPageData = pdata ? pdata.slice((page - 1) * thePageSize, page * thePageSize) : []
            //   curPageData = selectedData.concat(curPageData) // 初始化已选中的值必须在待选列表中
                myAjaxPost(false, true, '', { page,page}, function (resp) {
                    let curPageData = resp.data;
                    curPageData = selectedData.concat(curPageData) // 初始化已选中的值必须在待选列表中
                    var result = [];
                    var obj = {};
                    for(var i =0; i<curPageData.length; i++){
                        if(!obj[curPageData[i].id]){
                            result.push(curPageData[i]);
                            obj[curPageData[i].id] = true;
                        }
                    }
                    for (var i = 0; i < result.length;i++) {
                        result[i].value = result[i].id;
                        result[i].title = result[i].name;
                    }
                    // layui 穿梭框初始值（value选项）里传的数据value组成的数组....
                    for (var i = 0, l = selectedData.length; i < l; i++) {
                        selectedData[i] = selectedData[i].value
                    }
                    reloadTransfer('serviceTransfer', result, selectedData)
                })
            }
          });
        }
      }
      // 成员添加教程
      $(document).on('click', '.add-service-doc-btn', showAddDoc)
      function showAddDoc() {
        layer.open({
          type: 1
          ,title: '如何添加成员'
          ,closeBtn: true
          ,area: '688px'
          ,id: 'addServiceDoc' //设定一个id，防止重复弹出
          ,content: layui.$('#addServiceDocModel')
          ,btn: ['知道了']
          ,yes: function(index, layero) {
            layer.close(index)
          }
        })
      }

    }


    $(".apanel-confirm").on("click",function(){
       parent.$("#selectedEtCon").empty();
       var data = layui.transfer.getData('serviceTransfer'); // 获取已选区域数据
       var html ='';
       var arr = [];
       for (var i = 0; i < data.length; i++) {
          arr.push(data[i].external_userid);
          html += '<div class="service-card">';
          html += '<i class="iconfont icon-person"></i>'+data[i].name;
          html += '</div>';
       }
        parent.$("#selectedEtCon").append(html);
        parent.$("#selectedEt").val(arr);
        parent.layer.closeAll('iframe');
    })

    $(".layui-btn-primary").on("click",function(){
      parent.layer.closeAll('iframe');
    })
  </script>

</body>
</html>